<template>
  <div class="app-car-container">
    <CustomContent>
      <template v-slot:body>
        <el-tabs type="card" v-model="tabIndex">
          <el-tab-pane name="0" label="基本信息">
            <MmvTitle title="订单信息"></MmvTitle>
            <el-descriptions class="table-margin" :column="3" border :labelStyle="{ width: '150px' }">
              <el-descriptions-item label-class-name="my-descriptions-label" content-class-name="my-content">
                <template slot="label"> 订单编号</template>
                {{ detail.orderInfo.orderNo }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 订单来源</template>
                <dict-tag :options="dict.type.sys_order_source" :value="detail.orderInfo.orderSource" />
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 网络订单号</template>
                {{ detail.orderInfo.networkOrderNo }}
              </el-descriptions-item>

              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 订单标签</template>
                {{ formatLabel(detail.orderInfo.labels) || '--' }}
              </el-descriptions-item>

              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 发车员</template>
                {{ detail.orderInfo.salesman || '--' }}
              </el-descriptions-item>

              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 收车员</template>
                {{ detail.orderInfo.vehicleCollectorName || '--' }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 订单负责人</template>
                {{ detail.orderInfo.headName || '--' }}
              </el-descriptions-item>

              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 下单人</template>
                {{ detail.orderInfo.orderingPersonnelName || '--' }}
              </el-descriptions-item>

              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 订单状态
                </template>
                <dict-tag :options="dict.type.sys_order_status" :value="detail.orderInfo.orderStatus" />
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 取车类型
                </template>
                {{
                  {
                    1: '到店取还车',
                    3: '上门送取车',
                    4: '上门送车',
                    5: '上门取车',
                  }[Number(detail.orderInfo.rentalType)]
                }}
              </el-descriptions-item>

              <el-descriptions-item label-class-name="my-descriptions-label"
                v-if="detail.orderInfo.previousOrderNumber">
                <template slot="label"> 换车前订单号</template>
                <span style="font-size: 14px; color: #1890ff;cursor:pointer;"
                  @click="handleDetail(detail.orderInfo.previousOrderNumber)">{{ detail.orderInfo.previousOrderNumber
                  }}</span>
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" v-if="detail.orderInfo.afterOrderNumber">
                <template slot="label"> 换车后订单号</template>
                <span style="font-size: 14px; color: #1890ff;cursor:pointer;"
                  @click="handleDetail(detail.orderInfo.afterOrderNumber)">{{ detail.orderInfo.afterOrderNumber
                  }}</span>
              </el-descriptions-item>


              <template v-if="detail.carInfo.carSource == 6">
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label"> 托管单价
                  </template>
                  {{ detail.carInfo.escrowUnitPrice || '--' }}
                </el-descriptions-item>

                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label"> 用车天数
                  </template>
                  {{ detail.carInfo.escrowOrderDays || '--' }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label"> 托管费用
                  </template>
                  {{ detail.carInfo.escrowAmount || '--' }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label"> 托管费用结算
                  </template>
                  <span v-if="detail.orderInfo.orderStatus > 4 && detail.orderInfo.orderStatus != 10">
                    {{ detail.carInfo.settlementStatus
                      == 2 ? '已结算' : '待结算' }}</span>
                  <span v-else>--</span>
                </el-descriptions-item>
              </template>

              <template v-if="charterService == 1">
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label"> 是否需要代驾
                  </template>
                  {{ detail.orderInfo.isSubstituteDriving == 1 ? '是' : '否' }}
                </el-descriptions-item>

                <el-descriptions-item v-if="detail.orderInfo.isSubstituteDriving == 1"
                  label-class-name="my-descriptions-label">
                  <template slot="label"> 司机名称
                  </template>
                  {{ detail.orderInfo.substituteDrivingName || '--' }}
                </el-descriptions-item>
              </template>

            </el-descriptions>
            <el-descriptions class="table-margin" :column="3" border :labelStyle="{ width: '150px' }">
              <el-descriptions-item label-class-name="my-descriptions-label" content-class-name="my-content">
                <template slot="label"> 预约取车时间
                </template>
                {{ detail.orderInfo.rentalStartTime }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 预约还车时间
                </template>
                {{ detail.orderInfo.rentalEndTime }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 预约租期（天）
                </template>
                {{ detail.orderInfo.leaseDays }}
              </el-descriptions-item>

              <template v-if="
                detail.orderInfo.orderStatus > 3 &&
                detail.orderInfo.orderStatus != 10
              ">
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label"> 实际取车时间
                  </template>
                  {{ detail.orderInfo.actualStartTime }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label"> 实际还车时间
                  </template>
                  {{ detail.orderInfo.actualEndTime }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label"> 实际租期（天）
                  </template>
                  {{ detail.orderInfo.actualLeaseDays }}
                </el-descriptions-item>
              </template>

              <el-descriptions-item label-class-name="my-descriptions-label" span="3" v-if="
                detail.orderInfo.rentalType == 3 ||
                detail.orderInfo.rentalType == 4
              ">
                <template slot="label"> 预约取车地址
                </template>
                {{ detail.orderInfo.takeAddress }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" span="3" v-if="
                detail.orderInfo.rentalType == 3 ||
                detail.orderInfo.rentalType == 5
              ">
                <template slot="label"> 预约还车地址
                </template>
                {{ detail.orderInfo.alsoAddress }}
              </el-descriptions-item>

              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 预约取车门店
                </template>
                {{
                  detail.orderInfo.reserveTakeStoreName
                }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 预约还车门店
                </template>
                {{
                  detail.orderInfo.reserveAlsoStoreName
                }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 预定车型
                </template>
                {{ detail.orderInfo.modelName }}
              </el-descriptions-item>

              <template v-if="
                detail.orderInfo.orderStatus > 3 &&
                detail.orderInfo.orderStatus != 10
              ">
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label"> 实际取车门店
                  </template>
                  {{ detail.orderInfo.takeStoreName }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label"> 实际还车门店
                  </template>
                  {{
                    detail.orderInfo.orderStatus > 4
                      ? detail.orderInfo.alsoStoreName
                      : ''
                  }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label"> 实际车型
                  </template>
                  {{ detail.orderInfo.actualModelName }}
                </el-descriptions-item>
              </template>

            </el-descriptions>
            <el-descriptions class="table-margin" :column="3" border :labelStyle="{ width: '150px' }">
              <el-descriptions-item label-class-name="my-descriptions-label" span="3">
                <template slot="label"> 订单说明
                </template>
                <div>
                  <p>{{ lastRemark }}</p>
                  <el-button v-if="orderRemarkList && orderRemarkList.length > 0" type="text"
                    @click="handleOrderRemarkHistory">查看更多</el-button>
                </div>

              </el-descriptions-item>
            </el-descriptions>


            <el-row :gutter="10" type="flex" justify="center">
              <el-col :span="6">
                <el-button type="text" @click="dialogVisibleOrderRemark = true">提交备注</el-button>
              </el-col>
            </el-row>




            <template v-if="detail.carInfo.carNo">
              <MmvTitle title="车辆信息"></MmvTitle>
              <el-descriptions class="table-margin" :column="3" border>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label"> 分配车辆
                  </template>
                  {{
                    detail.orderInfo.actualModelName || '--'
                  }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label"> 车牌号
                  </template>
                  {{ detail.carInfo.carNo || '--' }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label"> 车架号
                  </template>
                  {{ detail.carInfo.vinNo || '--' }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label"> 发动机号
                  </template>
                  {{ detail.carInfo.engineNo || '--' }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label"> 能源形式
                  </template>
                  <dict-tag :options="dict.type.style_model" :value="detail.carInfo.styleModel" />
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label"> 燃油类型
                  </template>
                  <dict-tag :options="dict.type.fuel_type" :value="detail.carInfo.fuelType" />
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label"> 变速箱
                  </template>
                  <dict-tag :options="dict.type.speed_changing_box" :value="detail.carInfo.speedChangingBox" />
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label"> 座位数
                  </template>
                  <dict-tag :options="dict.type.seat" :value="detail.carInfo.seating" />
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label"> 排量
                  </template>
                  <dict-tag :options="dict.type.displacement" :value="detail.carInfo.displacement" />
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" v-if="detail.carInfo.sameJobName">
                  <template slot="label"> 所属同行
                  </template>
                  {{ detail.carInfo.sameJobName }}
                </el-descriptions-item>
              </el-descriptions>
            </template>

            <MmvTitle title="客户信息"></MmvTitle>

            <MemberDetail :detail="detail.customerInfo"></MemberDetail>

            <MmvTitle title="交车验车单" v-if="
              detail.orderInfo.orderStatus > 3 &&
              detail.orderInfo.orderStatus != 10
            "></MmvTitle>
            <el-descriptions class="table-margin" :column="2" border v-if="
              detail.orderInfo.orderStatus > 3 &&
              detail.orderInfo.orderStatus != 10
            ">
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 车辆油量
                </template>
                <span v-if="detail.control == 0">
                  {{
                    detail.carInspection.fuelCapacity
                  }}/16
                </span>
                <span v-else>
                  <span v-if="fuelType == 1">{{ detail.carInspection.fuelCapacity }} %</span>
                  <span v-else>{{ detail.carInspection.fuelCapacity }} 升</span>
                </span>

              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 公里数
                </template>
                {{ detail.carInspection.vehicleMileage }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 验车时间
                </template>
                {{
                  new Date(detail.carInspection.takeAlsoTime) | parseTime
                }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 车辆随车物品
                </template>
                {{ detail.carInspection.accessoryItems }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" span="2">
                <template slot="label"> 其他描述
                </template>
                {{ detail.carInspection.remark }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" span="2">
                <template slot="label"> 车身照片</template>
                <template v-for="item in detail.carInspection.bodyImage">
                  <el-image :key="item" :src="item | mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]"
                    class="mmv-image" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                </template>
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" span="2">
                <template slot="label"> 车辆划痕</template>
                <template v-for="item in detail.carInspection.scratchImage">
                  <el-image :key="item" :src="item | mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]"
                    class="mmv-image" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                </template>
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" span="2">
                <template slot="label"> 内饰照片</template>
                <template v-for="item in detail.carInspection.interiorImage">
                  <el-image :key="item" :src="item | mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]"
                    class="mmv-image" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                </template>
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" span="2">
                <template slot="label"> 仪表盘</template>
                <template v-for="item in detail.carInspection.panelImage">
                  <el-image :key="item" :src="item | mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]"
                    class="mmv-image" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                </template>
              </el-descriptions-item>

              <el-descriptions-item label-class-name="my-descriptions-label" span="2">
                <template slot="label"> 验车视频</template>
                <!-- <template v-for="item in detail.carInspection.videoUrls"> -->
                <div style="width: 320px;height: 180px;"
                  v-if="detail.carInspection.videoUrls != null && detail.carInspection.videoUrls.length > 0">
                  <video-player class="video-player vjs-custom-skin" ref="videoPlayer1" :playsinline="true"
                    :options="playerOptions1">
                  </video-player>
                </div>

                <!-- </template> -->
              </el-descriptions-item>

              <el-descriptions-item label-class-name="my-descriptions-label" span="2">
                <template slot="label"> 客户签名</template>
                <template v-for="item in detail.carInspection.signImage">
                  <el-image :key="item" :src="item | mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]"
                    class="mmv-image" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                </template>
              </el-descriptions-item>
            </el-descriptions>

            <MmvTitle title="还车验车单" v-if="
              detail.orderInfo.orderStatus > 4 &&
              detail.orderInfo.orderStatus != 10
            "></MmvTitle>
            <el-descriptions class="table-margin" :column="2" border v-if="
              detail.orderInfo.orderStatus > 4 &&
              detail.orderInfo.orderStatus != 10
            ">
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 车辆油量
                </template>
                <span v-if="detail.control == 0">
                  {{ detail.alsoCarCheck.fuelCapacity }}/16
                </span>
                <span v-else>
                  <span v-if="fuelType == 1">{{ detail.alsoCarCheck.fuelCapacity }} %</span>
                  <span v-else>{{ detail.alsoCarCheck.fuelCapacity }} 升</span>
                </span>

              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 公里数
                </template>
                {{ detail.alsoCarCheck.vehicleMileage }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 验车时间
                </template>
                {{
                  new Date(detail.alsoCarCheck.takeAlsoTime) | parseTime
                }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label"> 车辆随车物品
                </template>
                {{ detail.alsoCarCheck.accessoryItems }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" span="2">
                <template slot="label"> 其他描述
                </template>
                {{ detail.alsoCarCheck.remark }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" span="2">
                <template slot="label"> 车身照片</template>
                <template v-for="item in detail.alsoCarCheck.bodyImage">
                  <el-image :key="item" :src="item | mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]"
                    class="mmv-image" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                </template>
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" span="2">
                <template slot="label"> 车辆划痕</template>
                <template v-for="item in detail.alsoCarCheck.scratchImage">
                  <el-image :key="item" :src="item | mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]"
                    class="mmv-image" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                </template>
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" span="2">
                <template slot="label"> 内饰照片</template>
                <template v-for="item in detail.alsoCarCheck.interiorImage">
                  <el-image :key="item" :src="item | mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]"
                    class="mmv-image" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                </template>
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" span="2">
                <template slot="label"> 仪表盘</template>
                <template v-for="item in detail.alsoCarCheck.panelImage">
                  <el-image :key="item" :src="item | mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]"
                    class="mmv-image" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                </template>
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" span="2">
                <template slot="label"> 验车视频</template>
                <!-- <template v-for="item in detail.carInspection.videoUrls"> -->
                <div style="width: 320px;height: 180px;"
                  v-if="detail.alsoCarCheck.videoUrls != null && detail.alsoCarCheck.videoUrls.length > 0">
                  <video-player class="video-player vjs-custom-skin" ref="videoPlayer2" :playsinline="true"
                    :options="playerOptions2">
                  </video-player>
                </div>
                <!-- </template> -->
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" span="2">
                <template slot="label"> 客户签名</template>
                <template v-for="item in detail.alsoCarCheck.signImage">
                  <el-image :key="item" :src="item | mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]"
                    class="mmv-image" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                </template>
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane name="1" label="违章信息">
            <MmvTitle title="违章信息"></MmvTitle>
            <el-row>
              <el-col :span="24" class="table-padding">
                <el-table v-loading="loading" :data="detail.carIllegalList" border>
                  <el-table-column label="违章时间" prop="illegalTime" align="center" min-width="160"
                    show-overflow-tooltip />
                  <el-table-column label="违章地点" align="center" prop="illegalLocation" min-width="160"
                    show-overflow-tooltip />

                  <el-table-column label="扣分" align="center" min-width="160" show-overflow-tooltip
                    prop="pointsDeduction" />
                  <el-table-column label="罚款" align="center" min-width="160" show-overflow-tooltip
                    prop="illegalFines" />
                  <el-table-column label="处理状态" align="center" min-width="160" show-overflow-tooltip
                    prop="processingStatus">
                    <template slot-scope="{ row }">
                      {{
                        { 1: '未处理', 2: '已处理未缴费', 3: '已处理', 4: '已缴费未处理' }[
                        Number(row.processingStatus)
                        ]
                      }}
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane name="2" label="续租信息">
            <MmvTitle title="续租信息"></MmvTitle>
            <el-row>
              <el-col :span="24" class="table-padding">
                <el-table v-loading="loading" :data="renewRecord" border>
                  <el-table-column label="下单时间" align="center" prop="createTime" />
                  <el-table-column label="原预定日期" align="center" prop="beforeTime" />
                  <el-table-column label="续租日期" align="center" prop="afterTime" />
                  <el-table-column label="续租时长" align="center" prop="renewDays">
                    <template slot-scope="{ row }">
                      <div>{{ row.renewDays }}天</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="续租总金额" align="center" prop="renewCost">
                    <template slot-scope="{ row }">
                      <div>¥{{ row.renewCost }}元</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="150" fixed="right" align="center">
                    <template slot-scope="{ row }">
                      <el-button type="text" size="mini" @click="renewRecordEdit(row)" v-if="row.canEdit">编辑</el-button>
                      <el-button type="text" size="mini" @click="renewRecordDelete(row)"
                        v-if="row.canEdit">取消</el-button>
                      <el-button type="text" size="mini" @click="renewRecordDetail(row)">查看明细</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane name="3" label="费用信息">
            <MmvCostDetail ref="MmvCostDetail" :orderNo="orderNo"></MmvCostDetail>
          </el-tab-pane>
          <el-tab-pane name="4" label="合同信息">
            <order-contract-info :orderNo="orderNo" :order-detail="detail"></order-contract-info>
          </el-tab-pane>
        </el-tabs>
      </template>
      <template v-slot:footer>
        <div class="footer">
          <el-button type="info" plain @click.native="close">取消</el-button>
        </div>
      </template>


    </CustomContent>

    <el-dialog title="订单续租" :visible.sync="showOrderRenewal" width="1200px" destroy-on-close append-to-body
      @close="getRenewRecordList(true)">
      <MmvOrderRenewalEdit ref="MmvOrderRenewalEdit" v-if="showOrderRenewal" :orderNo="orderNo" :id="renewRecordId"
        @close="showOrderRenewal = false"></MmvOrderRenewalEdit>
    </el-dialog>

    <el-dialog title="续租费用详情" :visible.sync="showRecordDetail" width="1000px" destroy-on-close append-to-body>
      <el-table :data="renewRecordDetailData.orderChargingItems" border>
        <el-table-column label="收费项名称" align="center" prop="chargeProjectName" />
        <el-table-column label="单价" align="center" prop="unitPrice">
          <template slot-scope="{ row }">
            <span v-if="row.isRent == 1">
              日均:{{ row.unitPrice }}元

              <el-popover placement="right" trigger="click">
                <div class="ant-popover-inner-content">
                  <div class="fee-detail-wrapper">
                    <div class="day-item" v-for="(item, index) in renewRecordDetailData.orderPriceCalendars"
                      :key="index">
                      <div class="date-weekname">
                        <div>{{ item.sameDay }}</div>
                        <div>{{ item.dateOfWeek | dateOfWeek }}</div>
                      </div>
                      <div class="price-color word-break">¥{{ item.price }}</div>
                    </div>
                  </div>
                </div>
                <el-button slot="reference" icon="el-icon-search" type="text">明细</el-button>
              </el-popover>


            </span>
            <span v-else>
              {{ row.unitPrice }}元
            </span>
          </template>
        </el-table-column>
        <el-table-column label="收费类型" align="center" prop="chargeItemsType">
          <template slot-scope="{ row }">
            <dict-tag :options="dict.type.charge_type" :value="row.chargeItemsType" />
          </template>
        </el-table-column>
        <el-table-column label="数目" align="center" prop="number" />
        <el-table-column label="费用" align="center" prop="chargeMoney" />
      </el-table>

      <div slot="footer">
        <el-button @click="showRecordDetail = false">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog title="提交订单说明" :visible.sync="dialogVisibleOrderRemark" width="30%">
      <div>
        <el-form ref="remarkForm" :model="remarkForm" label-width="80px" :rules="remarkFormRules">
          <el-form-item label="说明" required prop="remarkContent">
            <el-input type="textarea" v-model="remarkForm.remarkContent" maxlength="500" rows="10" placeholder="请输入订单说明"
              show-word-limit></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleOrderRemark = false">取 消</el-button>
        <el-button type="primary" @click="commitOrderRemark">确 定</el-button>
      </span>
    </el-dialog>
    <history-order-remark ref="historyOrderRemark" :order-remark-list="orderRemarkList"></history-order-remark>
  </div>
</template>

<script>
import * as api from '@/api/order/index'
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import MmvCostDetail from '@/views/order/orderBasic/costDetail'
import CustomContent from '@/components/custom/content.vue'
import { getAllLabel } from "@/api/label/label"
import MemberDetail from '@/views/components/memberDetail.vue'
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import MmvOrderRenewalEdit from './orderRenewalEdit.vue'
import { addOrderRemark } from "@/api/order/index";
import HistoryOrderRemark from "./components/historyOrderRemark.vue";
import OrderContractInfo from "./components/orderContractInfo.vue";
import Template from "@/views/system/template/index.vue";
import { carOilQuantityt } from '@/api/car/car_basic'
export default {
  components: {
    Template,
    MmvTitle,
    MmvCostDetail,
    CustomContent,
    MemberDetail,
    MmvOrderRenewalEdit,
    videoPlayer,
    HistoryOrderRemark,
    OrderContractInfo
  },
  filters: {
    memberType(val) {
      return (
        {
          1: '企业',
          2: '个人',
        }[Number(val)] || ''
      )
    },

    dateOfWeek(val) {
      return {
        1: '星期一',
        2: '星期二',
        3: '星期三',
        4: '星期四',
        5: '星期五',
        6: '星期六',
        7: '星期日',
      }[Number(val)] || '';
    },
    memberSource(val) {
      return (
        {
          1: '搜索',
          2: '分享',
          3: '扫码',
          4: '手动录入',
        }[Number(val)] || ''
      )
    },
    imageUrl(url) {
      return process.env.VUE_APP_BASE_IMAGE_URL + url
    },
  },
  dicts: [
    'memberType',
    'sys_order_source',
    'sys_order_status',
    'style_model',
    'fuel_type',
    'speed_changing_box',
    'seat',
    'displacement',
    'document_type',
    'charge_type',
  ],
  data() {
    return {
      fuelType: null,
      tabIndex: '0',
      orderRemarkList: [],
      remarkForm: {
        orderNo: this.$route.query.orderNo,
        remarkContent: '',
      },
      remarkFormRules: {
        remarkContent: [
          { required: true, message: '请输入订单说明', trigger: 'blur' }
        ],
      },
      dialogVisibleOrderRemark: false,
      orderNo: null,
      showRecordDetail: false,
      showOrderRenewal: false,
      renewRecordId: null,
      playerOptions1: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false,  // 如果为true,浏览器准备好时开始回放
        muted: false,     // 默认情况下将会消除任何音频。
        loop: false,      // 是否视频一结束就重新开始。
        preload: 'auto',  // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9',  // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: false,  // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: "video/mp4",  // 类型
          src: ''             // url地址
        }],
        poster: '',  // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试',  // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,           // 当前时间和持续时间的分隔符
          durationDisplay: true,       // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true       // 是否显示全屏按钮
        }
      },
      playerOptions2: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false,  // 如果为true,浏览器准备好时开始回放
        muted: false,     // 默认情况下将会消除任何音频。
        loop: false,      // 是否视频一结束就重新开始。
        preload: 'auto',  // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9',  // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true,  // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: "video/mp4",  // 类型
          src: ''             // url地址
        }],
        poster: '',  // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试',  // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,           // 当前时间和持续时间的分隔符
          durationDisplay: true,       // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true       // 是否显示全屏按钮
        }
      },

      renewRecordDetailData: {},
      labelList: [],
      detail: {
        orderInfo: {
          //订单信息
          orderNo: '', //  "05055c045ad744799ee12ac0f3f41050",//订单编号
          orderStatus: '', //  11,//订单状态
          rentalType: '', //  null,//取车类型
          takeStoreName: '', //  "北广场自助点",//取车门店
          alsoStoreName: '', //  "北广场自助点",//还车门店
          actualStartTime: '', //  null,//实际取车时间
          actualEndTime: '', //  null,//实际还车时间
          leaseDays: '', //  2//租赁天数
          salesman: '', //  发车员
          vehicleCollectorName: '', //  收车员
          authenticationStatus: 0//认证状态
        },
        carInfo: {
          //车辆信息
          modelName: '', //  "风骏5",//预定品牌/车系/车型
          carNo: '', //  null,//车牌号
          vinNo: '', //  null,//车架号
          engineNo: '', //  null,//发动机号
          styleModel: '', //  null,//能源形式
          fuelType: '', //  null,//燃油类型
          speedChangingBox: '', //  null,//变速箱
          seating: '', //  null,//座位数
          displacement: '', //  null//排量
        },
        customerInfo: {
          //客户信息
          memberNo: '', //  "M16462134546695155",//客户编号
          memberType: '', //  2,//客户类型
          memberName: '', //  "代元宝",//客户名称/企业名称
          memberSource: '', //  4,//客户来源
          contactPhone: '', //  "13892006829",//联系电话
          contactAddress: '', //  "陕西省西安市碑林区",//联系地址 /企业地址
          cardId: '', //  "610423198901224412",//证件号
          cardValidity: '', //  "2026-01-01",//证件有效期
          sfUrl: [], //证件图片
          drivingId: '', // "610423198901224412",//驾驶证编号
          drivingType: '', // "c1",//驾驶证类型
          drivingValidity: '', // "2026-01-01",//驾驶证有效期
          jsUrl: [], //驾驶证图片
          businessLicenseUrl: null, //营业执照
          creditCode: null, //统一社会信用代码
          authenticationStatus: 0//认证状态
        },
        carInspection: {
          //交车验车单
          id: '', //  "05055c045ad744799ee12ac0f3f41051",
          fuelCapacity: '', //  1.0,//车辆油量
          vehicleMileage: '', //  1.0,//公里数
          accessoryItems: '', //  null,//车辆随车物品(逗号隔开)
          remark: '', //  null,//其他描述
          takeAlsoTime: '', //  null,//取车时间
          conductor: '', //  "张三",//处理人
          bodyImage: [], //  null,//车身照片
          panelImage: [], //  null,//仪表盘
          interiorImage: [], //  null,//内饰照片
          scratchImage: [], //  null,//车辆划痕
          signImage: [], //  null//客户签名
          videoUrls: [] //验车视频

        },
        alsoCarCheck: {
          //还车验车单
          id: '', //  "05055c045ad744799ee12ac0f3f41051",
          fuelCapacity: '', //  1.0,//车辆油量
          vehicleMileage: '', //  1.0,//公里数
          accessoryItems: '', //  null,//车辆随车物品(逗号隔开)
          remark: '', //  null,//其他描述
          takeAlsoTime: '', //  null,//还车时间
          conductor: '', //  "张三",//处理人
          lkosten: '', //  null,//补充油费(还车验车)
          bodyImage: [], //  null,//车身照片
          panelImage: [], //  null,//仪表盘
          interiorImage: [], //  null,//内饰照片
          scratchImage: [], //  null,//车辆划痕
          signImage: [], //  null//客户签名
          cost: [], //  null//费用明细
          videoUrls: [] //验车视频
        },
        carIllegalList: [],
        // deductTheIllegalDeposit:[],
      },
      renewRecord: [], //续租记录
      loading: false,
    }
  },
  computed: {
    lastRemark() {
      let remark = '';
      if (this.orderRemarkList && this.orderRemarkList.length > 0) {
        remark = this.orderRemarkList[0].remarkContent;
      }
      return remark;
    },

    charterService() {
      const charterService = this.$store.state.user.charterService || 2;
      return charterService;
    },
  },

  created() {
    this.orderNo = this.$route.query.orderNo
    let tabIndex = this.$route.query.tabIndex
    if (tabIndex) {
      this.tabIndex = tabIndex
    }
    this.getAllLabel()
    this.getData()
  },
  methods: {

    carOilQuantity(id) {
      carOilQuantityt({ id: id }).then((res) => {
        if (res.data) {
          this.fuelType = res.data.fuelType
        }
      })
    },
    commitOrderRemark() {
      this.$refs.remarkForm.validate((valid) => {
        if (valid) {
          api.addOrderRemark(this.remarkForm).then(res => {
            this.dialogVisibleOrderRemark = false;
            this.$message({ type: 'success', message: '提交成功' });
            this.remarkForm.remarkContent = '';
            this.getData();
          })
        }
      })
    },
    handleOrderRemarkHistory() {
      this.$refs.historyOrderRemark.show();
    },
    getData() {
      this.loading = true
      api.detail(this.orderNo).then((response) => {
        if (response.data.control == 1) {
          this.carOilQuantity(response.data.carInfo.carId)
        }
        this.loading = false;
        this.orderRemarkList = response.data.orderRemarkList || [];
        // this.detail = response.data || {};
        this.detail.control = response.data.control
        this.detail.orderInfo = response.data.orderInfo || {}
        this.detail.customerInfo = response.data.customerInfo || {}
        this.detail.carInfo = response.data.carInfo || {}
        this.detail.alsoCarCheck = response.data.alsoCarCheck || {}
        this.detail.carInspection = response.data.carInspection || {}
        this.detail.carIllegalList = response.data.carIllegalList || []

        this.detail.customerInfo.labelClassify = response.data.customerInfo.labelClassify.split(',')
        // this.detail.deductTheIllegalDeposit = response.data.deductTheIllegalDeposit || {};

        if (this.detail.carInspection.videoUrls != null && this.detail.carInspection.videoUrls.length > 0) {//存在交车验车视频
          this.playerOptions1['sources'][0]['src'] = process.env.VUE_APP_BASE_IMAGE_URL + this.detail.carInspection.videoUrls[0];
        }
        if (this.detail.alsoCarCheck.videoUrls != null && this.detail.alsoCarCheck.videoUrls.length > 0) {//存在还车验车视频
          this.playerOptions2['sources'][0]['src'] = process.env.VUE_APP_BASE_IMAGE_URL + this.detail.alsoCarCheck.videoUrls[0];
        }
      })
      this.getRenewRecordList();
    },
    getRenewRecordList() {
      this.showOrderRenewal = false
      api.listRenewRecord({ orderNo: this.orderNo }).then((response) => {
        this.renewRecord = response.data
        this.loading = false
      })
    },
    getAllLabel() {
      getAllLabel().then((response) => {
        this.labelList = response.data
      })
    },
    formatLabel(labels) {
      return this.labelList.filter(item => {
        return labels?.split(",").indexOf(item.id + "") >= 0
      }).map(i => {
        return i.name
      }).join(",")
    },
    close() {
      // 关闭页面
      this.$router.go(-1)
      this.$store.dispatch('tagsView/delView', this.$route)
    },
    /** 订单详情按钮 */
    handleDetail(orderNo) {
      this.orderNo = orderNo
      this.getAllLabel()
      this.getData()
      this.$refs.MmvCostDetail.changgeorderNo(orderNo)
    },
    renewRecordDetail(row) {
      api.renewRecordDetail(this.orderNo, row.id).then((response) => {
        this.renewRecordDetailData = response.data
        this.showRecordDetail = true
      })
    },
    renewRecordEdit(row) {
      this.renewRecordId = row.id;
      this.showOrderRenewal = true;
    },
    renewRecordDelete(row) {
      api.renewRecordDelete(this.orderNo, row.id).then((response) => {
        this.$message.success(response.msg);
        this.getRenewRecordList();
      })
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (index === 1) {
          const values = data.map((item) => Number(item[column.property]))
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' 元'
        }
      })

      return sums
    },
  },
}
</script>


<style scoped>
.fee-detail-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 420px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  max-height: 400px;
  overflow-y: auto;
}

.day-item {
  width: 80px;
  text-align: center;
  margin-top: 10px;
}

.price-color {
  color: #ff8b26;
}

.margin-bottom {
  margin-bottom: 20px;
}

.my-content {
  width: 300px !important;
}

/* .video-js .vjs-icon-placeholder {
  width: 50%;
  height: 50%;
  display: block;
} */
</style>
